<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏切换</title>
</head>
<link rel="stylesheet" href="tab.css">
<body>
    <!--
        1 先写出需要的样式主模版;
        2 li元素的横向转换 css代码;
        3 js控制tab栏和tab_con的内容的转换，获取标签元素li，每个li元素注册为事件;
        换li元素的颜色tab_con内容需编写函数，颜色改变可用排他原理：即消除其他li的样式，只给点击的li进行样式替换;
        为每一个li属性定义自定义属性index，找到items集合中与index相对应的元素对象，在点击index元素时，显示对应的item;

    -->
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">
                    商品介绍
                </li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">商品介绍模块内容</div>
        <div class="item" style="display: none;">规格与包装模块内容</div>
        <div class="item" style="display: none;">售后与保障模块内容</div>
        <div class="item" style="display: none;">商品评价模块内容</div>
        <div class="item" style="display: none;">手机社区模块内容</div>
    </div>
    <script>
        var lis=document.querySelectorAll('.tab_list li');
        var items=document.querySelectorAll('.item');
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=changeTab;
        }
        function changeTab(){
            for(var j=0;j<lis.length;j++){
                if(lis[j]!==this)//this 永远指向调用者；本this的调用者是lis[i].onclick-->当鼠标点击该li时
                {
                    lis[j].className="";//如果不是被点击的li那么就把格式清除
                }else{
                    this.className="current"//是的话就把格式定为css写好的格式current
                }
            }
        }
    </script>
</body>
</html>